<template>
  <div>
    首页
    <!-- <button @click="btnClick">调用api</button> -->
    <button @click="show = !show">动画切换</button>
    <transition name="fade">
      <div v-if="show" class="box" />
    </transition>
    <button @click="btnClick">点击获取环境变量</button>
  </div>
</template>

<script>
// import { sysLogin } from '@/api/test'
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    // async btnClick () {
    //   const res = await sysLogin()
    //   console.log(res)
    // }
    btnClick() {
      console.log('环境变量：', process.env.VUE_APP_URL)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background-color: skyblue;
}
// 进入前的状态，进入前希望从什么状态变成正常状态
.fade-enter {
  opacity: 0;
  width: 0;
  height: 0;
  transform: translateX(-200px);
}
// 进入过程中一直存在的css,它主要用于承载transition
.fade-enter-active {
  transition: all 2.5s;
}
// 离开时状态，希望从正常状态变成什么状态
.fade-leave-to {
  opacity: 0;
  transform: translateX(200px);
}
// 离开过程中一直存在的css，它主要用于承载transition
.fade-leave-active {
  transition: all 2.5s;
}
</style>
